.tc {
  text-align: center;
}
/*******************/
/* flex-box mixins */
/*******************/
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-line-pack: center;
}
.flex-display {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
/* flex-direction */
/* row | row-reverse | column | column-reverse */
/***************************************/
/* wrap */
/* nowrap | wrap | wrap-reverse */
/* order */
/* align-content */
/* flex-start | flex-end | center | stretch | space-between | space-around */
/***************************************/
/* 父级元素 */
/* justify-content */
/* flex-start | flex-end | center | space-between | space-around */
/***************************************/
/* align-items */
/* flex-start | flex-end | center | baseline | stretch */
/***************************************/
/* 子级元素 */
/* align-self */
/* flex-start | flex-end | center | baseline | stretch */
/*
 * @Para_1
 *    flex-grow: 扩展比率
 *    flex-shrink: 收缩比率
 * @Para_2
 *    flex-basis: 伸缩基准值
 * @Para_3
 *    initial: 在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩
 *    auto: 会根据主轴自动伸缩以占用所有剩余空间，非常类似于普通流中的自动外边距
 */
.flex-1 {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/*
 *  0. 栅格开发三部曲
 *  1. 解决全屏栅格
 *  2. 解决嵌套栅格
 *  3. 解决偏移栅格
 */
.row-str {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -ms-flex-line-pack: stretch;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
}
.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-line-pack: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
}
.row-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-line-pack: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-align-content: stretch;
  align-content: stretch;
  -ms-flex-line-pack: stretch;
}
.row,
.row-column,
[class*='col-'],
.wrap-col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.no-flexbox [class*='col-'] {
  padding: 5px;
}
.flexbox .wrap-col {
  margin: 5px;
}
[class*='col-1-'] {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
[class*='col-2-'] {
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  flex: 2 1 auto;
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
[class*='col-3-'] {
  -webkit-flex: 3 1 auto;
  -ms-flex: 3 1 auto;
  flex: 3 1 auto;
  -webkit-box-flex: 3;
  -moz-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
[class*='col-4-'] {
  -webkit-flex: 4 1 auto;
  -ms-flex: 4 1 auto;
  flex: 4 1 auto;
  -webkit-box-flex: 4;
  -moz-box-flex: 4;
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
}
[class*='col-5-'] {
  -webkit-flex: 5 1 auto;
  -ms-flex: 5 1 auto;
  flex: 5 1 auto;
  -webkit-box-flex: 5;
  -moz-box-flex: 5;
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
}
[class*='col-6-'] {
  -webkit-flex: 6 1 auto;
  -ms-flex: 6 1 auto;
  flex: 6 1 auto;
  -webkit-box-flex: 6;
  -moz-box-flex: 6;
  -webkit-flex: 6;
  -ms-flex: 6;
  flex: 6;
}
[class*='col-7-'] {
  -webkit-flex: 7 1 auto;
  -ms-flex: 7 1 auto;
  flex: 7 1 auto;
  -webkit-box-flex: 7;
  -moz-box-flex: 7;
  -webkit-flex: 7;
  -ms-flex: 7;
  flex: 7;
}
[class*='col-8-'] {
  -webkit-flex: 8 1 auto;
  -ms-flex: 8 1 auto;
  flex: 8 1 auto;
  -webkit-box-flex: 8;
  -moz-box-flex: 8;
  -webkit-flex: 8;
  -ms-flex: 8;
  flex: 8;
}
[class*='col-9-'] {
  -webkit-flex: 9 1 auto;
  -ms-flex: 9 1 auto;
  flex: 9 1 auto;
  -webkit-box-flex: 9;
  -moz-box-flex: 9;
  -webkit-flex: 9;
  -ms-flex: 9;
  flex: 9;
}
[class*='col-10-'] {
  -webkit-flex: 10 1 auto;
  -ms-flex: 10 1 auto;
  flex: 10 1 auto;
  -webkit-box-flex: 10;
  -moz-box-flex: 10;
  -webkit-flex: 10;
  -ms-flex: 10;
  flex: 10;
}
[class*='col-11-'] {
  -webkit-flex: 11 1 auto;
  -ms-flex: 11 1 auto;
  flex: 11 1 auto;
  -webkit-box-flex: 11;
  -moz-box-flex: 11;
  -webkit-flex: 11;
  -ms-flex: 11;
  flex: 11;
}
/* 1/2 */
[class*='col-'][class*='Los-1-2'],
[class*='col-'][class*='Los-2-4'],
[class*='col-'][class*='Los-3-6'],
[class*='col-'][class*='Los-4-8'],
[class*='col-'][class*='Los-8-12'] {
  margin-left: 50%;
}
[class*='col-'][class*='Ros-1-2'],
[class*='col-'][class*='Ros-2-4'],
[class*='col-'][class*='Ros-3-6'],
[class*='col-'][class*='Ros-4-8'],
[class*='col-'][class*='Ros-8-12'] {
  margin-right: 50%;
}
.no-flexbox [class*='col-1-2'],
.no-flexbox [class*='col-2-4'],
.no-flexbox [class*='col-3-6'],
.no-flexbox [class*='col-4-8'],
.no-flexbox [class*='col-8-12'] {
  width: 50%;
}
/* 1/3 */
[class*='col-'][class*='Los-1-3'],
[class*='col-'][class*='Los-2-6'],
[class*='col-'][class*='Los-3-9'],
[class*='col-'][class*='Los-4-12'] {
  margin-left: 33.333333333%;
}
[class*='col-'][class*='Ros-1-3'],
[class*='col-'][class*='Ros-2-6'],
[class*='col-'][class*='Ros-3-9'],
[class*='col-'][class*='Ros-4-12'] {
  margin-right: 33.333333333%;
}
.no-flexbox [class*='col-1-3'],
.no-flexbox [class*='col-2-6'],
.no-flexbox [class*='col-3-9'],
.no-flexbox [class*='col-4-12'] {
  width: 33.333333333%;
}
/* 2/3 */
[class*='col-'][class*='Los-2-3'],
[class*='col-'][class*='Los-4-6'],
[class*='col-'][class*='Los-6-9'],
[class*='col-'][class*='Los-8-12'] {
  margin-left: 66.666666666%;
}
[class*='col-'][class*='Ros-2-3'],
[class*='col-'][class*='Ros-4-6'],
[class*='col-'][class*='Ros-6-9'],
[class*='col-'][class*='Ros-8-12'] {
  margin-right: 66.666666666%;
}
.no-flexbox [class*='col-2-3'],
.no-flexbox [class*='col-4-6'],
.no-flexbox [class*='col-6-9'],
.no-flexbox [class*='col-8-12'] {
  width: 66.666666666%;
}
/* 1/4 */
[class*='col-'][class*='Los-1-4'],
[class*='col-'][class*='Los-2-8'],
[class*='col-'][class*='Los-3-12'] {
  margin-left: 25%;
}
[class*='col-'][class*='Ros-1-4'],
[class*='col-'][class*='Ros-2-8'],
[class*='col-'][class*='Ros-3-12'] {
  margin-right: 25%;
}
.no-flexbox [class*='col-1-4'],
.no-flexbox [class*='col-2-8'],
.no-flexbox [class*='col-3-12'] {
  width: 25%;
}
/* 3/4 */
[class*='col-'][class*='Los-3-4'],
[class*='col-'][class*='Los-6-8'],
[class*='col-'][class*='Los-9-12'] {
  margin-left: 75%;
}
[class*='col-'][class*='Ros-3-4'],
[class*='col-'][class*='Ros-6-8'],
[class*='col-'][class*='Ros-9-12'] {
  margin-right: 75%;
}
.no-flexbox [class*='col-3-4'],
.no-flexbox [class*='col-6-8'],
.no-flexbox [class*='col-9-12'] {
  width: 75%;
}
/* 1/5 */
[class*='col-'][class*='Los-1-5'],
[class*='col-'][class*='Los-2-10'] {
  margin-left: 20%;
}
[class*='col-'][class*='Ros-1-5'],
[class*='col-'][class*='Ros-2-10'] {
  margin-right: 20%;
}
.no-flexbox [class*='col-1-5'],
.no-flexbox [class*='col-2-10'] {
  width: 20%;
}
/* 2/5 */
[class*='col-'][class*='Los-2-5'],
[class*='col-'][class*='Los-4-10'] {
  margin-left: 40%;
}
[class*='col-'][class*='Ros-2-5'],
[class*='col-'][class*='Ros-4-10'] {
  margin-right: 40%;
}
.no-flexbox [class*='col-2-5'],
.no-flexbox [class*='col-4-10'] {
  width: 40%;
}
/* 3/5 */
[class*='col-'][class*='Los-3-5'],
[class*='col-'][class*='Los-6-10'] {
  margin-left: 60%;
}
[class*='col-'][class*='Ros-3-5'],
[class*='col-'][class*='Ros-6-10'] {
  margin-right: 60%;
}
.no-flexbox [class*='col-3-5'],
.no-flexbox [class*='col-6-10'] {
  width: 60%;
}
/* 4/5 */
[class*='col-'][class*='Los-4-5'],
[class*='col-'][class*='Los-8-10'] {
  margin-left: 80%;
}
[class*='col-'][class*='Ros-4-5'],
[class*='col-'][class*='Ros-8-10'] {
  margin-right: 80%;
}
.no-flexbox [class*='col-4-5'],
.no-flexbox [class*='col-8-10'] {
  width: 80%;
}
/* 1/6 */
[class*='col-'][class*='Los-1-6'],
[class*='col-'][class*='Los-2-12'] {
  margin-left: 16.666666666%;
}
[class*='col-'][class*='Ros-1-6'],
[class*='col-'][class*='Ros-2-12'] {
  margin-right: 16.666666666%;
}
.no-flexbox [class*='col-1-6'],
.no-flexbox [class*='col-2-12'] {
  width: 16.666666666%;
}
/* 5/6 */
[class*='col-'][class*='Los-5-6'],
[class*='col-'][class*='Los-10-12'] {
  margin-left: 83.333333333%;
}
[class*='col-'][class*='Ros-5-6'],
[class*='col-'][class*='Ros-10-12'] {
  margin-right: 83.333333333%;
}
.no-flexbox [class*='col-5-6'],
.no-flexbox [class*='col-10-12'] {
  width: 83.333333333%;
}
/* 1/7 */
[class*='col-'][class*='Los-1-7'] {
  margin-left: 14.285714285%;
}
[class*='col-'][class*='Ros-1-7'] {
  margin-right: 14.285714285%;
}
.no-flexbox [class*='col-1-7'] {
  width: 14.285714285%;
}
/* 2/7 */
[class*='col-'][class*='Los-2-7'] {
  margin-left: 28.571429%;
}
[class*='col-'][class*='Ros-2-7'] {
  margin-right: 28.571429%;
}
.no-flexbox [class*='col-2-7'] {
  width: 28.571429%;
}
/* 3/7 */
[class*='col-'][class*='Los-3-7'] {
  margin-left: 42.857143%;
}
[class*='col-'][class*='Ros-3-7'] {
  margin-right: 42.857143%;
}
.no-flexbox [class*='col-3-7'] {
  width: 42.857143%;
}
/* 4/7 */
[class*='col-'][class*='Los-4-7'] {
  margin-left: 57.142857%;
}
[class*='col-'][class*='Ros-4-7'] {
  margin-right: 57.142857%;
}
.no-flexbox [class*='col-4-7'] {
  width: 57.142857%;
}
/* 5/7 */
[class*='col-'][class*='Los-5-7'] {
  margin-left: 71.428571%;
}
[class*='col-'][class*='Ros-5-7'] {
  margin-right: 71.428571%;
}
.no-flexbox [class*='col-5-7'] {
  width: 71.428571%;
}
/* 6/7 */
[class*='col-'][class*='Los-6-7'] {
  margin-left: 85.714286%;
}
[class*='col-'][class*='Ros-6-7'] {
  margin-right: 85.714286%;
}
.no-flexbox [class*='col-6-7'] {
  width: 85.714286%;
}
/* 1/8 */
[class*='col-'][class*='Los-1-8'] {
  margin-left: 12.5%;
}
[class*='col-'][class*='Ros-1-8'] {
  margin-right: 12.5%;
}
.no-flexbox [class*='col-1-8'] {
  width: 12.5%;
}
/* 3/8 */
[class*='col-'][class*='Los-3-8'] {
  margin-left: 37.5%;
}
[class*='col-'][class*='Ros-3-8'] {
  margin-right: 37.5%;
}
.no-flexbox [class*='col-3-8'] {
  width: 37.5%;
}
/* 5/8 */
[class*='col-'][class*='Los-5-8'] {
  margin-left: 62.5%;
}
[class*='col-'][class*='Ros-5-8'] {
  margin-right: 62.5%;
}
.no-flexbox [class*='col-5-8'] {
  width: 62.5%;
}
/* 7/8 */
[class*='col-'][class*='Los-7-8'] {
  margin-left: 87.5%;
}
[class*='col-'][class*='Ros-7-8'] {
  margin-right: 87.5%;
}
.no-flexbox [class*='col-7-8'] {
  width: 87.5%;
}
/* 1/9 */
[class*='col-'][class*='Los-1-9'] {
  margin-left: 11.111111%;
}
[class*='col-'][class*='Ros-1-9'] {
  margin-right: 11.111111%;
}
.no-flexbox [class*='col-1-9'] {
  width: 11.111111%;
}
/* 2/9 */
[class*='col-'][class*='Los-2-9'] {
  margin-left: 22.222222%;
}
[class*='col-'][class*='Ros-2-9'] {
  margin-right: 22.222222%;
}
.no-flexbox [class*='col-2-9'] {
  width: 22.222222%;
}
/* 4/9 */
[class*='col-'][class*='Los-4-9'] {
  margin-left: 44.444444%;
}
[class*='col-'][class*='Ros-4-9'] {
  margin-right: 44.444444%;
}
.no-flexbox [class*='col-4-9'] {
  width: 44.444444%;
}
/* 5/9 */
[class*='col-'][class*='Los-5-9'] {
  margin-left: 55.555555%;
}
[class*='col-'][class*='Ros-5-9'] {
  margin-right: 55.555555%;
}
.no-flexbox [class*='col-5-9'] {
  width: 55.555555%;
}
/* 7/9 */
[class*='col-'][class*='Los-7-9'] {
  margin-left: 77.777777%;
}
[class*='col-'][class*='Ros-7-9'] {
  margin-right: 77.777777%;
}
.no-flexbox [class*='col-7-9'] {
  width: 77.777777%;
}
/* 8/9 */
[class*='col-'][class*='Los-8-9'] {
  margin-left: 88.888888%;
}
[class*='col-'][class*='Ros-8-9'] {
  margin-right: 88.888888%;
}
.no-flexbox [class*='col-8-9'] {
  width: 88.888888%;
}
/* 1/10 */
[class*='col-'][class*='Los-1-10'] {
  margin-left: 10%;
}
[class*='col-'][class*='Ros-1-10'] {
  margin-right: 10%;
}
.no-flexbox [class*='col-1-10'] {
  width: 10%;
}
/* 3/10 */
[class*='col-'][class*='Los-3-10'] {
  margin-left: 30%;
}
[class*='col-'][class*='Ros-3-10'] {
  margin-right: 30%;
}
.no-flexbox [class*='col-3-10'] {
  width: 30%;
}
/* 7/10 */
[class*='col-'][class*='Los-7-10'] {
  margin-left: 70%;
}
[class*='col-'][class*='Ros-7-10'] {
  margin-right: 70%;
}
.no-flexbox [class*='col-7-10'] {
  width: 70%;
}
/* 9/10 */
[class*='col-'][class*='Los-9-10'] {
  margin-left: 90%;
}
[class*='col-'][class*='Ros-9-10'] {
  margin-right: 90%;
}
.no-flexbox [class*='col-9-10'] {
  width: 90%;
}
/* 1/11 */
[class*='col-'][class*='Los-1-11'] {
  margin-left: 9.0909090%;
}
[class*='col-'][class*='Ros-1-11'] {
  margin-right: 9.0909090%;
}
.no-flexbox [class*='col-1-11'] {
  width: 9.0909090%;
}
/* 2/11 */
[class*='col-'][class*='Los-2-11'] {
  margin-left: 18.181818%;
}
[class*='col-'][class*='Ros-2-11'] {
  margin-right: 18.181818%;
}
.no-flexbox [class*='col-2-11'] {
  width: 18.181818%;
}
/* 3/11 */
[class*='col-'][class*='Los-3-11'] {
  margin-left: 27.272727%;
}
[class*='col-'][class*='Ros-3-11'] {
  margin-right: 27.272727%;
}
.no-flexbox [class*='col-3-11'] {
  width: 27.272727%;
}
/* 4/11 */
[class*='col-'][class*='Los-4-11'] {
  margin-left: 36.363636%;
}
[class*='col-'][class*='Ros-4-11'] {
  margin-right: 36.363636%;
}
.no-flexbox [class*='col-4-11'] {
  width: 36.363636%;
}
/* 5/11 */
[class*='col-'][class*='Los-5-11'] {
  margin-left: 45.454545%;
}
[class*='col-'][class*='Ros-5-11'] {
  margin-right: 45.454545%;
}
.no-flexbox [class*='col-5-11'] {
  width: 45.454545%;
}
/* 6/11 */
[class*='col-'][class*='Los-6-11'] {
  margin-left: 54.545454%;
}
[class*='col-'][class*='Ros-6-11'] {
  margin-right: 54.545454%;
}
.no-flexbox [class*='col-6-11'] {
  width: 54.545454%;
}
/* 7/11 */
[class*='col-'][class*='Los-7-11'] {
  margin-left: 63.636363%;
}
[class*='col-'][class*='Ros-7-11'] {
  margin-right: 63.636363%;
}
.no-flexbox [class*='col-7-11'] {
  width: 63.636363%;
}
/* 8/11 */
[class*='col-'][class*='Los-8-11'] {
  margin-left: 72.727272%;
}
[class*='col-'][class*='Ros-8-11'] {
  margin-right: 72.727272%;
}
.no-flexbox [class*='col-8-11'] {
  width: 72.727272%;
}
/* 9/11 */
[class*='col-'][class*='Los-9-11'] {
  margin-left: 81.818181%;
}
[class*='col-'][class*='Ros-9-11'] {
  margin-right: 81.818181%;
}
.no-flexbox [class*='col-9-11'] {
  width: 81.818181%;
}
/* 10/11 */
[class*='col-'][class*='Los-10-11'] {
  margin-left: 90.909090%;
}
[class*='col-'][class*='Ros-10-11'] {
  margin-right: 90.909090%;
}
.no-flexbox [class*='col-10-11'] {
  width: 90.909090%;
}
/* 1/12 */
[class*='col-'][class*='Los-1-12'] {
  margin-left: 8.3333333%;
}
[class*='col-'][class*='Ros-1-12'] {
  margin-right: 8.3333333%;
}
.no-flexbox [class*='col-1-12'] {
  width: 8.3333333%;
}
/* 5/12 */
[class*='col-'][class*='Los-5-12'] {
  margin-left: 41.666666%;
}
[class*='col-'][class*='Ros-5-12'] {
  margin-right: 41.666666%;
}
.no-flexbox [class*='col-5-12'] {
  width: 41.666666%;
}
/* 7/12 */
[class*='col-'][class*='Los-7-12'] {
  margin-left: 58.333333%;
}
[class*='col-'][class*='Ros-7-12'] {
  margin-right: 58.333333%;
}
.no-flexbox [class*='col-7-12'] {
  width: 58.333333%;
}
/* 11/12 */
[class*='col-'][class*='Los-11-12'] {
  margin-left: 91.666666%;
}
[class*='col-'][class*='Ros-11-12'] {
  margin-right: 91.666666%;
}
.no-flexbox [class*='col-11-12'] {
  width: 91.666666%;
}
html {
  height: 100%;
  font-size: 62.5%;
  font: 11px/1.5em 'Microsoft YaHei';
  color: #000;
}
body {
  height: 100%;
  background-color: #eee;
  background-image: url("img/bgs/bg1.jpg");
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -ms-flex-line-pack: center;
}
body .bg0 {
  background-color: #eee;
  background-image: url("img/low_contrast_linen_@2X.png");
}
body .bg1 {
  background-color: #eee;
  background-image: url("img/bgs/bg1.jpg");
}
body .bg2 {
  background-color: #eee;
  background-image: url("img/bgs/bg2.jpg");
}
body .bg3 {
  background-color: #eee;
  background-image: url("img/bgs/bg3.jpg");
}
body .bg4 {
  background-color: #eee;
  background-image: url("img/bgs/bg4.jpg");
}
body .bg5 {
  background-color: #eee;
  background-image: url("img/bgs/bg5.jpg");
}
body .bg6 {
  background-color: #eee;
  background-image: url("img/bgs/bg6.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  repeat-x: #FFFFFF;
}
body .bg7 {
  background-color: #eee;
  background-image: url("img/bgs/bg7.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  repeat-x: #FFFFFF;
}
.loginBox {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  width: 720px;
  height: 360px;
  margin-top: -200px;
  background: #eeeeee;
  background: -moz-linear-gradient(top, #ffffff, #efefef 8%);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#f4f4f4));
  border-radius: 8px;
  box-shadow: 0 0 15px #222;
  border: 1px solid #fff;
}
.loginBox > section {
  width: 100%;
}
.loginBox .regist {
  padding-top: 15px;
  padding-left: 25px;
}
